<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>shopCart</title>
    <link rel="stylesheet" th:href="@{/css/qingzhu0.css}">
    <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">
    <link rel="stylesheet" th:href="@{/css/shopCart.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" th:href="@{/css/qingzhu6.css}">
</head>
<body>
<div th:replace="common::header"></div>
    <div class="outer9">
        <div class="inter1">
            <h1>购物车</h1>
        </div>
        <div class="inter2">
            <div class="inter21">
                <input type="checkbox" class="checkAll"><span class="s0">全选</span>
                <span class="s2">商品名称</span><span class="s3">单价</span>
                <span class="count">数量</span><span class="total">小计</span><span class="deltitle">操作</span>
            </div>
            <div class="inter22">
                <ul id="product_list">
                </ul>
            </div>
            <div class="inter23">
                <div class="picture">
                    <img th:src="@{/image/购物车.png}" alt="">
                </div>
                <p>您的购物车还没有商品，快去挑选心爱的商品吧！</p>
            </div>
        </div>
        <div class="inter3">
            <div class="inter31">
                <button class="paysure"  onclick="paysure()">
                    <span>确认结算</span>
                </button>
                <input type="checkbox" class="checkAll"><span class="s11">全选</span>
                <span class="ss1">删除</span>
                <div class="foot">
                    已选<span class="totalCount">0</span>件
                    合计(不含运费) : <span class="totalPrice">¥0</span>元<br>
<!--                    <span class="ss3">已优惠 : ￥<span class="ss4 totalDiscount"></span></span>-->
                </div>
            </div>
        </div>
    </div>
<div th:replace="common::footer"></div>

</body>
<script th:src="@{/js/jqurey.js}"></script>
<script th:src="@{/js/shop.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript">
    var shopcart

    var jqxhr;
    //设置ajax请求完成后运行的函数,
    $.ajaxSetup({
        complete:function(){
            console.log(jqxhr.getResponseHeader("REDIRECT"))
            console.log(jqxhr.getResponseHeader("CONTENTPATH"))
            if("REDIRECT" == jqxhr.getResponseHeader("REDIRECT")){ //若HEADER中含有REDIRECT说明后端想重定向，
                var win = window;
                while(win != win.top){
                    win = win.top;
                }
                console.log("进行重定向")
                win.location.href = jqxhr.getResponseHeader("CONTENTPATH");//将后端重定向的地址取出来,使用win.location.href去实现重定向的要求
            }
        }
    });

    $(function () {
        getDate()
    })
    function getDate(){
        jqxhr=$.ajax({
            //请求方式
            type : "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "listCart.do",
            //请求成功
            success : function(data) {
                console.log("链接成功")
                putDate(data.data)
            }
        });
    }
    function putDate(data){
        var product=data;
        var product_list=$("#product_list")
        $(product).each(function (index, item) {
            var li=$("<li></li>")
            var itemid=$("<span class='itemid'>"+item.id+"</span>")
            // var discount=$("<span class='discount'>"+item.discount+"</span>")
            var check=$("<input type='checkbox' class='checkitem'>")
            var img=$("<img src='/mall/image/"+item.product.mainImage+"'>")
            var name=$("<span class='s1 toinfo'>"+item.product.name+"</span>")
            var price=$("<span class='money'>¥</span><span class='price'>"+item.product.price+"</span>")
            var count=$("<input type='button' value='-' class='sub'><span class='count'> "+item.number+" </span><input type='button' value='+' class='add'>")
            var total=$("<span class='money1'>¥</span><span class='total'>"+(item.product.price*item.number)+"</span>")
            var del=$("<span class='del'>删除</span>")
            var infobox=$("<a href='/mall/product/get.html?id="+item.product.id+"'></a>")
            infobox.append(img)
            infobox.append(name)
            var pricebox=$("<span class='pricebox'></span>")
            pricebox.append(price)
            var countbox=$("<span class='countbox'></span>")
            countbox.append(count)
            var totalbox=$("<span class='totalbox'></span>")
            totalbox.append(total)
            var operabox=$("<span class='operabox'></span>")
            operabox.append(del)
            li.append(check)
            li.append(itemid)
            li.append(infobox)
            li.append(pricebox)
            li.append(countbox)
            li.append(totalbox)
            li.append(operabox)
            product_list.append(li)
            console.log(item.id);
        })
    }
    function paysure() {
        var data=[]
        $("ul :checked").each(function () {
            data.push($(this).siblings(".itemid").html())
        });
        if(data.length<1){
            alert("请选择商品")
            return;
        }
        console.log(data)
        var ids=data
        jqxhr=$.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "/mall/order/submit.do",
            // 商品id列表
            data : JSON.stringify(ids),
            //请求成功
            success : function(result) {
            },
            error: function (e) {
                alert("请求失败")
            }
        });
    }
    layui.use('layer', function(){
        var layer = layui.layer;
    });
</script>
<script th:src="@{/js/购物车.js}"></script>
</html>